<template>
  <div class="p-4">
    <h1 class="text-2xl font-bold mb-6">UnoCSS 图标演示</h1>

    <el-card class="mb-4">
      <template #header>
        <div class="flex items-center gap-2">
          <div class="i-carbon-information text-blue-500"></div>
          <span>基本用法</span>
        </div>
      </template>
      <div class="p-2">
        <p class="mb-4"
          >UnoCSS图标使用
          <code class="bg-gray-100 p-1 rounded">i-[collection]-[icon]</code> 格式命名</p
        >

        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mt-4">
          <div
            v-for="icon in basicIcons"
            :key="icon"
            class="flex-center flex-col border p-2 rounded hover:bg-gray-50"
          >
            <div :class="icon + ' text-2xl mb-2'"></div>
            <div class="text-xs">{{ icon }}</div>
          </div>
        </div>
      </div>
    </el-card>

    <el-card class="mb-4">
      <template #header>
        <div class="flex items-center gap-2">
          <div class="i-carbon-color-palette text-purple-500"></div>
          <span>颜色控制</span>
        </div>
      </template>
      <div class="p-2">
        <p class="mb-4">通过添加颜色类来改变图标颜色</p>

        <div class="flex flex-wrap gap-4 mt-4">
          <div
            v-for="color in colors"
            :key="color.name"
            class="flex-center flex-col border p-2 rounded hover:bg-gray-50"
          >
            <div :class="`i-carbon-star-filled text-2xl mb-2 ${color.class}`"></div>
            <div class="text-xs">{{ color.name }}</div>
          </div>
        </div>
      </div>
    </el-card>

    <el-card>
      <template #header>
        <div class="flex items-center gap-2">
          <div class="i-carbon-resize text-green-500"></div>
          <span>尺寸控制</span>
        </div>
      </template>
      <div class="p-2">
        <p class="mb-4">图标尺寸可以通过文本大小或宽高类控制</p>

        <div class="flex flex-wrap gap-8 mt-4 items-end">
          <div v-for="size in sizes" :key="size.name" class="flex-center flex-col">
            <div :class="`i-carbon-user ${size.class} mb-2`"></div>
            <div class="text-xs">{{ size.name }}</div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  const basicIcons = [  
    'i-carbon-home', // 主页
    'i-carbon-search', // 搜索
    'i-carbon-user-avatar', // 用户头像  
    'i-carbon-settings', // 设置
    'i-carbon-bell', // 通知铃铛
    'i-carbon-edit', // 编辑
    'i-carbon-delete', // 删除
    'i-carbon-add', // 添加
    'i-carbon-close', // 关闭
    'i-carbon-check', // 勾选
    'i-carbon-arrow-right', // 右箭头
    'i-carbon-menu' // 菜单
  ]

  const colors = [
    { name: '默认', class: '' },
    { name: '主色', class: 'text-primary' },
    { name: '蓝色', class: 'text-blue-500' },
    { name: '绿色', class: 'text-green-500' },
    { name: '红色', class: 'text-red-500' },
    { name: '黄色', class: 'text-yellow-500' },
    { name: '紫色', class: 'text-purple-500' }
  ]

  const sizes = [
    { name: '超小', class: 'text-xs' },
    { name: '小', class: 'text-sm' },
    { name: '默认', class: 'text-base' },
    { name: '大', class: 'text-xl' },
    { name: '超大', class: 'text-2xl' },
    { name: '特大', class: 'text-4xl' }
  ]
</script>
